
<template>
  <view class="goods-container">
    <!-- 双列商品列表 -->
    <view class="goods-row">
      <view 
        v-for="(item, index) in goodsData" 
        :key="index"
        class="goods-item"
		 @click="todetails"
      >
        <!-- 商品图片 -->
        <image 
          :src="item.image" 
          class="goods-image"
          mode="aspectFill"
          :alt="item.name"
		 
        />
        
        <!-- 商品信息 -->
        <view class="goods-info">
			<view class="gather_title">
				<view class="course_title_tag">视频</view>
				 <text class="goods-name">{{ item.name }}</text>
			</view>
         
          <text class="goods-desc">{{ item.desc }}</text>
		  <view class="goods-price" v-if="item.price==0">
		    <text class="price-number">免费</text>
		  </view>
          <view class="goods-price" v-else>
            <text class="price-symbol">¥</text>
            <text class="price-number">{{ item.price }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    // 商品数据
    goodsData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      goodsList: [],
      screenWidth: 375 // 默认屏幕宽度
    }
  },
  computed: {
    // 计算每个商品的宽度（左右各一个）
    itemWidth() {
      return (this.screenWidth - 30) / 2 + 'px'
    }
  },
  mounted() {
	  
    // 获取屏幕宽度
    uni.getSystemInfo({
      success: (res) => {
        this.screenWidth = res.windowWidth
      }
    })
  },
  methods:{
	  todetails(){
		  uni.navigateTo({
			url:'/pages/index/home/details/details'
		  })	
	  },
  }
	
}
</script>

<style scoped>
.goods-container {
  padding: 15rpx;
  margin-bottom: 50px;
}

.goods-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.goods-item {
  margin-bottom: 20rpx;
  border-radius: 16rpx;
  overflow: hidden;
  width: 48%;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}
.gather_title{
	display: flex;
	flex-direction: row;
}
.course_title_tag{
    background-color: #dda56a;
	border-radius: 3px;
	color: #fff;
	font-size:8px;
	display: flex;
	padding: 2px 3px;
	height: 15px;
	align-items: center;
	justify-content: center;
	margin-right: 8px;
	}
.goods-image {
  width: 100%;
  height: 320rpx;
}

.goods-info {
  padding: 20rpx;
}

.goods-name {
  display: block;
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.goods-desc {
  display: block;
  font-size: 20rpx;
  color: #ffa02a;
  margin-bottom: 15rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.goods-price {
  display: flex;
  align-items: baseline;
}

.price-symbol {
  font-size: 24rpx;
  color: #ff4d4f;
  margin-right: 4rpx;
}

.price-number {
  font-size: 32rpx;
  color: #ff4d4f;
  font-weight: bold;
}
</style>
